<template>
  <div id="hotspots" class="hotspots" v-if="hotspots">
    <div class="content-wrapper">
      <xm-nav :nav="nav"></xm-nav>
      <section class="title border-scale-1px">
        <div class="site-wrapper">
          <img class="site-bg" :src="hotspots.stop.img">
          <span class="site-name">{{getSiteName}}</span>
        </div>
        <div class="introduction-wrapper">
          <div class="intro js-intro" :class="{'elli-3':!isShowIntro}">{{hotspots.stop.description}}</div>
          <div class="bottom-icon-wrapper" @click="switchIntro">
            <span class="bottom-icon icon-keyboard_arrow_right" :class="{'hide-icon': isShowIntro}"></span>
          </div>
        </div>
      </section>
      <section class="hotspots-wrapper">
        <hotspots-list :spots="hotspots.hots" :rootUrl="rootUrl"></hotspots-list>
      </section>
    </div>
    <section class="no-more">
      没有更多了~
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import nav from 'components/nav/Nav';
  import hotspotsList from 'components/hotspotsList/HotspotsList';
  /*
    nav配置信息
  */
  const nacConf = {
    left: {
      isShow: true,
      type: 'IMG'
    },
    middle: {
      isShow: true,
      type: 'TEXT',
      content: '周边热点'
    },
    right: {
      isShow: false,
      type: 'TEXT',
      content: '右边'
    }
  };
  export default {
    name: 'hotspots',
    created () {
      /*
        路由信息
      */
      this.params = this.util.getQueryStringObj();
      let _ajax = this.$http;
      let conf = this.sConf;
      let code = this.code;
      let params = this.params;

      _ajax.get(conf.apiRoot + conf.apiPre.one + conf.api.hot, {
        params: {
          stop_id: params.id
        }
      }).then(
        (res) => {
          let data = res.body;
          if (data.code === code.ERR_OK) {
            this.hotspots = data.data;
            this.hotspots = data.data;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    data () {
      return {
        sConf: this.sConf,
        nav: nacConf,
        hotspots: this.hotspots,
        rootUrl: this.sConf.productUrl,
        isShowIntro: false
      };
    },
    components: {
      'xm-nav': nav,
      'hotspots-list': hotspotsList
    },
    computed: {
      getSiteName () {
        return this.hotspots.stop.name_cn.split('=')[0];
      }
    },
    methods: {
      switchIntro () {
        this.isShowIntro = !this.isShowIntro;
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  @import './common/css/mixin.less';
  html{
    background-color: #f2f2f2;
  }
  html, body{
    height: 100%;
  }
  .hotspots {
    height: 100%;
    .content-wrapper{
      width: 100%;
      min-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 40px;
    }
    .title{
      background-color: #fff;
      // .border-bottom-1px(rgba(93, 79, 79, 0.5));
      .border-bottom-1px(rgba(0, 0, 0, 0.5));
      box-shadow: rgba(93, 79, 79, 0.57) 0px 1px 3px;
      .site-wrapper{
        position: relative;
        .site-bg{
          height: 150px;
          width: 100%;
        }
        .site-name{
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate3d(-50%, -50%, 0);
             -moz-transform: translate3d(-50%, -50%, 0);
              -ms-transform: translate3d(-50%, -50%, 0);
               -o-transform: translate3d(-50%, -50%, 0);
                  transform: translate3d(-50%, -50%, 0);
          font-size: 26px;
          color: #fff;
        }
      }
      .introduction-wrapper{
        position: relative;
        padding: 10px 15px;
        color: #a9a9a9;
        font-size: 16px;
        .intro{
          line-height: 21px;
        }
        .elli-enter-active, .elli-leave-active{
          -webkit-transition: all .25s;
             -moz-transition: all .25s;
              -ms-transition: all .25s;
               -o-transition: all .25s;
                  transition: all .25s;
        }
        .bottom-icon-wrapper{
          font-size: 18px;
          text-align: center;
        }
        .bottom-icon{
          margin-right: -34px;
          &:before{
            display: inline-block;
            transform-origin: 0 0;
            -webkit-transform: rotate(90deg);
               -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                 -o-transform: rotate(90deg);
                    transform: rotate(90deg);
          }
          &.hide-icon{
            margin-right: 0px;
            &:before{
              display: inline-block;
              transform-origin: 0 0;
              -webkit-transform: rotate(270deg) translateX(-18px);
                 -moz-transform: rotate(270deg) translateX(-18px);
                  -ms-transform: rotate(270deg) translateX(-18px);
                   -o-transform: rotate(270deg) translateX(-18px);
                      transform: rotate(270deg) translateX(-18px);
            }
          }
        }
      }
    }
    .hotspots-wrapper{
      padding: 10px 10px 0px;
    }
    .no-more{
      font-size: 15px;
      color: #c4c4c4;
      text-align: center;
      padding-top: 8px;
      padding-bottom: 16px;
      margin-top: -40px;
    }
  }
</style>
